import React from 'react';
import { v4 } from 'uuid';
import socketIOClient from 'socket.io-client';
import './App.css';

const ENDPOINT = 'http://127.0.0.1:1234';
let socket = socketIOClient(ENDPOINT, {
  extraHeaders: {
    'access-token': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhY2NvdW50Ijp7ImlkIjoiNWRlZmExNDAtNTcxNC0xMWViLWI4YmUtNmQzMTcyNDQwNzE0Iiwicm9sZXMiOlsidXdfc3RhZmYiXSwidGVuYW50X2lkIjoiYzJjZjhkNjctNzBkNC00MDExLTgyMzktZWRiNTM5ZDQwYTNmIn0sInN0YWZmIjp7ImlkIjoiOGNiM2QzNTgtODcyOS00Y2RkLThjYzctMTE4NmMyMzQwNGIyIiwiYnJhbmNoX2lkIjoiNjY3ZTc1ODUtOWM5Yi00N2VjLWE1OWQtOGVkZDVhY2ZiMmViIiwidGVuYW50X2lkIjoiYzJjZjhkNjctNzBkNC00MDExLTgyMzktZWRiNTM5ZDQwYTNmIn0sInRva2VuVHlwZSI6ImFjY2Vzc190b2tlbiIsImlhdCI6MTYxMTA0MDU3MCwiZXhwIjo5MDAxNjExMDQwNTcwfQ.ZpufqhxqJTiIXajo4EH9Dip7gwuZvM9KRtjCoJ8mJ74',
  },
});

class App extends React.Component {
  constructor(props) {
    super(props);
    this.anchorRef = React.createRef(null);
    this.state = {
      listData: [
        {
          id: 0,
          text: '我是第一条数据'
        },
        {
          id: 1,
          text: '我是第二条数据'
        },
        {
          id: 2,
          text: '我是第三条数据'
        }
      ],
    }
  }

  componentDidMount() {
    const id = v4();
    socket.on('connect', () => {
      socket.emit('USER_CONNECTION', { id, socketId: socket.id, status: 'ready' });
    })

    socket.on('TASK_ASSIGNMENT', (data) => {
      this.setState({
        listData: [...this.state.listData, {id: this.state.listData.length, text:data }],
      });
      console.log('receive', data);
    });
    window.addEventListener('beforeunload', this.handleUnload);
  }


  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.handleUnload);
  }

  handleUnload = (e) => {
    socket.emit('USER_CLOSE_TAB', {
      socketId: socket.id,
      status: 'ready'
    });
  }

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }

  // handle task assigned
  handleSubmit = (e) => {
    e.preventDefault();

    let result = {
      status: 'oke',
    }
    socket.emit('TASK_HANDLER', this.state.input, result);
    console.log('send', this.state.input)
  }

   scrollToAnchor = () => {
    this.anchorRef.current.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  };

  render() {
    return (
      <div style={{height: '100%', with:'100%'}}>
        <div className="main">
          <ul className="messages">
            {
              this.state.listData.map(item => {
                return <li key={item.id}>{item.text}</li>
              })
            }
            <a ref={this.anchorRef} ></a>
          </ul>
        </div>
        <div className='footer'>
          <div className='form'>
            <input name='input' autoComplete='false' placeholder='type here...' onChange={this.handleChange}/>
            {/* <input name="input" style={{ marginRight:'20px' }} onChange={this.handleChange} defaultValue={this.state?.task?.text} /> */}

            <button  onClick={this.handleSubmit}>send </button>
          </div>
        
        </div>
      </div>
    )
  }
}


export default App;

